<template>
  <div class="my-report">

    <van-nav-bar title="理赔主页" left-text="返回" left-arrow @click-left="backPrePage">
    </van-nav-bar>
    <van-button size="large" class="my-top-hegth" color="linear-gradient(to right, #D3F9B5, #1789FC)">
      <h5>申请理赔</h5>
      <h5>请选择你需要的理赔情况</h5>
    </van-button>

    <van-card @click="toClaimPage(index)" class="my-card-font" v-for="(item,index) in cardData" :key="index"
              :desc="item.desc"
              :title="item.title"
              :thumb="item.thumb"
    />
    <van-divider class="my-divider"
                 :style="{  padding: '0 16px' }"
    >
    </van-divider>
    <a class="a-1">查看保单理赔</a>
    <a class="a-2">查看理赔记录</a>

    <h6>xxx代理保险平台</h6>
  </div>
</template>

<script>
export default {
  name: "Report", data() {
    return {
      cardData: [
        {
          "id": 1,
          title: "医疗、疾病",
          desc: "被保险人生病",
          thumb: "../static/images/medical.png"
        },
        {
          "id": 2,
          title: "意外",
          desc: "被保险人发生意外",
          thumb: "../static/images/die.png"
        },
        {
          "id": 3,
          title: "身故",
          desc: "被保险人身故",
          thumb: "../static/images/accident.png"
        }
      ]
    }
  },
  methods: {
    backPrePage() {
      this.$router.go(-1);
    },
    toClaimPage(index) {
      if (index === 0) {
        this.$router.push({path: '/claim/main', query: {id: index}})
      }
    },
  }
}
</script>

<style lang="less" scoped>
.my-top-hegth {
  height: 120px;
}

h5 {
  text-align: left;
  margin-top: 15px;
}

.van-card__desc {
  max-height: 60px !important;
  color: #646566;
  line-height: 85px !important;
  font-size: 15px;
}

.van-card__title {
  max-height: 32px !important;
  font-weight: bold !important;
  line-height: 20px !important;
  font-size: 20px !important;
  margin-top: 5px;
  color: #333333;
}

.van-card {
  background-color: #FFFFFF !important;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 20px;
}

.my-report {
  background-color: #F7F7F7;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
}

.a-1 {
  margin-left: 55px;
  font-size: 20px;
}

.a-2 {
  margin-left: 25px;
  font-size: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 20px;
  text-align: center;
}

p {
  margin-top: 10px;
  font-size: 10px;
  color: #88958D;
  text-align: center;
}

.my-divider {
  margin-top: 10%;
}
</style>
